<template>
	<view class="_security_item">
		<view class="u-p-l-32 u-p-r-32 ">
			<view class="u-flex u-flex-between u-flex-items-center">
				<view class="f-s-16 f-w-b u-m-r-40 u-line-1">大剧院湖边唱歌人员(大剧院)</view>
				<status-tag :status="0"></status-tag>
			</view>
			<view class="u-m-t-24  u-flex u-flex-self-start">
				<image src="@/static/top-bg.png" style="width: 160rpx;height: 160rpx;" mode="aspectFill"></image>
				<view class="u-m-l-24 f-s-14">
					<view class=" u-flex u-flex-self-start">
						<view class="_title u-tips-color">发生位置</view>
						<view>唱歌人员已劝离</view>
					</view>
					<view class=" u-flex u-flex-self-start u-m-t-16">
						<view class="_title u-tips-color">添加时间</view>
						<view>2024-01-12 12:32</view>
					</view>
					<view class=" u-flex u-flex-self-start u-m-t-16">
						<view class="_title u-tips-color">添加人员</view>
						<view>王五</view>
					</view>
					<view class=" u-flex u-flex-self-start u-m-t-16">
						<view class="_title u-tips-color">事件位置</view>
						<view>121.234543,30.323454</view>
					</view>
				</view>
			</view>
			<view class="u-m-t-16 _area">大剧院湖边唱歌，人员太有安全隐患，已劝离</view>
		</view>
		<up-line margin="24rpx 0 "></up-line>
		<view class="u-flex u-flex-end u-flex-items-center u-p-l-32 u-p-r-32">
			<view class="u-m-r-24">
				<up-button text="删除" :customStyle="{
					width: '120rpx',
					height: '56rpx',
					border: '1rpx solid #E5E5E5',
					background: '#fff',
					borderRadius: '8rpx',
					fontSize: '28rpx',
					color: 'color: rgba(0,0,0,0.65)'
				}"></up-button>
			</view>
			<view class="u-m-r-24">
				<up-button text="编辑" :customStyle="{
					width: '120rpx',
					height: '56rpx',
					border: '1rpx solid #E5E5E5',
					background: '#fff',
					borderRadius: '8rpx',
					fontSize: '28rpx',
					color: 'color: rgba(0,0,0,0.65)'
				}"></up-button>
			</view>
			<view>
				<up-button text="详情" :customStyle="{
					width: '120rpx',
					height: '56rpx',
					background: '#1677FF',
					borderRadius: '8rpx',
					fontSize: '28rpx',
					color: '#FFFFFF'
				}" @click="toInfo"></up-button>
			</view>
		</view>

	</view>
</template>

<script setup>
	import StatusTag from '@/components/common/StatusTag.vue';
	const toInfo = ()=>{
		uni.navigateTo({
			url: '/subPackages/security/info'
		})
	}
</script>

<style lang="scss" scoped>
	._security_item {
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 16rpx;
		padding: 32rpx 0;
		margin-bottom: 24rpx;

		._title {
			min-width: 144rpx;
			width: 144rpx;
		}

		._area {
			background: rgba(0, 0, 0, 0.04);
			border-radius: 8rpx;
			padding: 24rpx;
			font-size: 28rpx;
			color: rgba(0, 0, 0, 0.85);
			line-height: 40rpx;
		}
	}
</style>